<template>
  <div>

    <div class="quote">
      <div class="quoteTop">

        <h4 class="panel-heading">查询条件</h4>

        <div class="query">

          <Row>

            <Col span="6">
            <label>链接名称</label>
            <Input size="small" style="width: 50%" v-model="queryObj.title"/>
            </Col>


            <Col span="6">
            <Button size="small" @click="getRecomUrl" type="primary">查 询</Button>
            <Button size="small" @click="reset" type="error">重 置</Button>
            </Col>

          </Row>

        </div>

      </div>

      <div>

      </div>
    </div>

    <div class="quote">
      <div class="quoteCenten">
        <table cellspacing="0">

          <tr>
            <th>No.</th>
            <th>产品id</th>
            <th>链接名称</th>
            <th>图片</th>
            <th>推广链接</th>
            <th>操作</th>
          </tr>

          <tr v-for="(item,index) in recomUrlList">
            <td v-text="index+1"></td>
            <td v-text="item.id"></td>
            <td v-text="item.title"></td>
            <td>
              <img :src="item.productImg" style="height: 100px"/>
            </td>
            <td v-text="item.shareUrl"></td>
            <td>
              <a href="javascript:void(0)" class="btn" v-bind:data-clipboard-text="item.shareUrl"
                 @click="copyToClipBoard(item)">复制链接</a>
            </td>
          </tr>
        </table>
      </div>
    </div>

  </div>

</template>

<script type="text/javascript">
  import api from '../../utils/api.js';
  import Clipboard from 'clipboard';

  export default {
    data: function () {
      return {

        recomUrlList: [],

        agentId: '',

        queryObj: {
          title: '',
          hotFlag: '',
          productType: '-1',
          agentId: '',
        },

      }
    },
    created: function () {
      this.queryObj.agentId = JSON.parse(localStorage.operation).id;
      this.getRecomUrl();
    },
    methods: {

      getRecomUrl: function () {
        var self = this;
        api.getProductRecomUrl(self.queryObj).then(function (res) {
          if (res.body.state == 1) {
            self.recomUrlList = res.body.data.rows;

            console.log(self.recomUrlList);
          } else {
            self.$Message.error(res.body.message.info);
          }

        })
      },

      copyToClipBoard: function (item) {
        this.$Message.success("【" + item.title + "】复制成功");
      },

      reset: function () {
        this.queryObj.title = '';
      },

    }
    ,
    mounted() {
      const clipboard = new Clipboard('.btn');
    }
  }
</script>
